<template>
	<view>
		<scroll-view id="scrollview" scroll-y :scroll-top="scrollTop" 
		:scroll-with-animation="true"
		:style="{height: style.contentH+'px'}"
		>
			<!-- 聊天列表 -->
			<block v-for="(item, index) in list" :key="index">
				<view class="chat-item">
					<user-chat-list :item="item" :index="index"></user-chat-list>
				</view>
			</block>
		</scroll-view>
		
		<user-chat-bottom @submit="submit"></user-chat-bottom>
	</view>
</template>

<script>
	import userChatBottom from '../../components/user-chat/user-chat-bottom.vue';
	import time from "../../common/time.js";
	import userChatList from '../../components/user-chat/user-chat-list.vue';
	export default {
		components:{
			userChatBottom,
			userChatList
		},
		data() {
			return {
				scrollTop:"",
				style:{
					contentH:0,
					itemH:0
				},
				list: []
			}
		},
		onLoad(){
			this.initdata();
			this.getdata();
		},
		onReady() {
			this.pageToBottom();
		},
		methods: {
			//初始化参数
			initdata(){
				try{
					const res = uni.getSystemInfoSync();
					this.style.contentH = res.windowHeight - uni.upx2px(120);
					// console.log(res.windowHeight - uni.upx2px(120));
				}catch(e){
				}
			},
			pageToBottom(){
				let q = uni.createSelectorQuery();
				q.select("#scrollview").boundingClientRect();
				q.selectAll(".chat-item").boundingClientRect();
				q.exec((res)=>{
					// console.log(JSON.stringify(res));
					res[1].forEach((ret)=>{
						this.style.itemH += ret.height;
					});
					if (this.style.itemH > this.style.contentH) {
						this.scrollTop = this.style.itemH;
					}
				});
			},
			//获取聊天数据
			getdata(){
				let arr=[
					{
						isme: false,
						userpic:"../../static/demo/userpic/11.jpg",
						type: "text",
						data: "哈哈哈",
						time: "1554965608",
						gstime:"",
					},
					{
						isme: true,
						userpic:"../../static/demo/userpic/10.jpg",
						type: "img",
						data: "../../static/demo/3.jpg",
						time: "1554965745",
						gstime:"",
					}
				];
				for( let i = 0; i < arr.length; i++) {
					arr[i].gstime = time.gettime.getChatTime(arr[i].time,i>0?arr[i-1].time:'0');
				}
				this.list = arr;
			},
			submit(text){
				if (text.length == 0) { return;}
				let now = new Date().getTime();
				let obj = {
						isme: true,
						userpic:"../../static/demo/userpic/10.jpg",
						type: "text",
						data: text,
						time: now,
						gstime: time.gettime.getChatTime(now,this.list.length != 0?this.list[this.list.length-1].time:'0'),
					};
				this.list.push(obj);
				this.pageToBottom();
			}
		}
	}
</script>

<style>

</style>
